<script type="text/javascript" src="https://www.google.com/jsapi"></script>

  <h3 id="h4-titulo">KPIS Negocios</h3>   <br>

 <?php
  
  if($ventas["totalEpress"] > 0)
      {
      $ventas_netas_empress = $ventas["totalEpress"]/$ventas["express"];
      }  else {
         $ventas_netas_empress =0; 
      }
  
  if($ventas["totalpropia"])
      {
      
  $ventas_netas_propias = $ventas["totalpropia"]/$ventas["propia"];
  
      }  else {
          $ventas_netas_propias =0;
      }
 
  
  ?> 

  <div id="div-grafico">
      
      <div id="div-milla-express" class="div-marco">
          
           <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Express', <?php echo intval($ventas_netas_empress); ?>]
         
        ]);

        var options = {
          width: 250, height: 250,
          redFrom: 0, redTo:28000,
          yellowFrom:28000, yellowTo: 32000,
          greenFrom: 32000, greenTo: 37500,
          minorTicks: 18000, max:37500
        };

        var chart = new google.visualization.Gauge(document.getElementById('div-milla-express'));
        chart.draw(data, options);
      }
    </script>
          
          
      </div>
      
       <div id="div-milla-propia" class="div-marco">
          
           <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Propia', <?php echo intval($ventas_netas_propias); ?>]
          
        ]);

        var options = {
          width: 250, height: 250,
          redFrom: 0, redTo:28000,
          yellowFrom:28000, yellowTo: 32000,
          greenFrom: 32000, greenTo: 35000,
          minorTicks: 18000, max:35000
        };

        var chart = new google.visualization.Gauge(document.getElementById('div-milla-propia'));
        chart.draw(data, options);
      }
    </script>
          
          
      </div>
      
    
      <div id="ventas">
          
          <?php echo $grafico_tipo_servicio; ?>
          
      </div>
      
      
  </div>
  
  
  <style>
      
      
      #content
      {
          height: 900px !important;
      }
      .div-marco
      {
          width: 250px;
          height: 250px;
          float: left;
          margin: 0 auto;
      }
      
      #div-espacio
      {
          width: 100%;
          height: 150px;
      }
      
        #h4-titulo
    {
        display: block;
        text-align: center;
        background-color: #06B014 ;
        color: white;
        font-weight: bold;
        border-radius: 2px 2px 2px 2px;
        padding: 6px 12px;
    }
    
    #div-select
    {
        float: right;
        width: 280px;
        height: 50px;;
    }
    
    input[type='text'], select {
	width:20%;
	border:1px solid #E5E5E5;
	-moz-border-radius:4px;
	border-radius:4px;
	height:20px;
	padding:2px;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	float:left;
}
input[type='text']:focus, select:focus {
	width:20%;
	border:1px solid #4CBAE5;
	-moz-border-radius:4px;
	border-radius:4px;
	height:20px;
	padding:2px;
	background-color:#D1F0FF;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	float:left;
}

    .error:before {
    border-color: transparent #BC1010 transparent transparent;
    border-style: solid;
    border-width: 8px;
    content: "";
    left: -16px;
    position: absolute;
    top: 5px;
}
.error {
    background-color: #BC1010;
    border-radius: 4px 4px 4px 4px;
    color: white;
    font-weight: bold;
    margin-left: 16px;
    margin-top: -5px;
    padding: 6px 12px;
    position: absolute;
}   
    
    form label  {

    background-color: #0066CC ;
    border-radius: 2px 2px 2px 2px;
    color: white;
    font-weight: bold;
    margin-left: 8px;
    margin-top: -3px;
    padding: 6px 12px;    
    float: left;
    display: block;
}

#fecha{
    
    float: left;
    width: 45%;
    height: 45%;
}

#div-formulario
{
    width: 100%;
    height: 100px;
    float: left;
}

 table
     {
         text-align: center;
         float: right;
         margin-right: 25px;
         
     } 
      
     td
     {
         padding: 5px;
         font-size: 12px;
         
     }

     #div-milla-propia
     {
         float: right !important;
     }
     

  </style>
  
  
      <script>
 
 $(document).ready(function () {
    var emailreg = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
    $(".boton").click(function (){
        $(".error").remove();
        if( $(".fdesde").val() == "" ){
            $(".fdesde").focus().after("<span class='error'>Ingrese La Fecha</span>");
            return false;
        }else if( $(".fhasta").val() == ""){
            $(".fhasta").focus().after("<span class='error'>Ingrese La Fecha</span>");
            return false;
        }
    });
});
    
    </script>
    
    <script>
$(function() {
//$( "#fhasta" ).datepicker();
 $('#fhasta').datepicker({dateFormat:'yy-mm-dd'});
});
</script>

<script>
$(function() {
//$( "#fdesde" ).datepicker();
 $('#fdesde').datepicker({dateFormat:'yy-mm-dd'});
});
</script>